<script setup lang="ts">
import { NFlex } from "naive-ui";
import { NForm } from "naive-ui";
import { NFormItem } from "naive-ui";
import { NInput } from "naive-ui";
import { NInputGroup } from "naive-ui";
import { NButton } from "naive-ui";
</script>

<template>
  <n-flex justify="center" class="w-full h-full">
    <n-flex justify="center" class="w-1/2">
      <n-form class="w-full pt-5">
        <n-form-item label="请输入用户名">
          <n-input placeholder="请输入用户名"></n-input>
        </n-form-item>
        <n-form-item label="请输入邮箱">
          <n-input-group>
            <n-input placeholder="请输入邮箱"></n-input>
            <n-button>发送验证码</n-button>
          </n-input-group>
        </n-form-item>
        <n-form-item label="验证码">
          <n-input placeholder="请输入验证码"></n-input>
        </n-form-item>
        <n-form-item label="请输入密码">
          <n-input
            type="password"
            show-password-on="click"
            placeholder="请输入密码"
          ></n-input>
        </n-form-item>
        <n-form-item label="请再次输入密码">
          <n-input
            type="password"
            show-password-on="click"
            placeholder="请再次输入密码"
          ></n-input>
        </n-form-item>
      </n-form>
    </n-flex>
  </n-flex>
</template>

<style scoped></style>
